<!-- author: xuett -->
<!-- date: 2023-06-09 16:47:53 -->
<!-- description:  -->
<template>
  <div class="tree-screen">
    <header>
      <h2 class="header-title"></h2>
    </header>

    <div class="info-window chart-border">
      <h4 class="chart-header">信息窗口</h4>
      <div class="introduce-container">
        <div v-if="selectInfo.name == 'bonnet'" class="video-info">
          <video class="introduce-video" controls>
            <source src="@/assets/video/suv.mp4" type="video/mp4" />
            您的浏览器不支持Video标签。
          </video>
        </div>
        <div v-else class="words-info">
          <p>name: {{ selectInfo.name }}</p>
          <p>材质数量：{{ selectInfo.materialLength }}</p>
          <p>geometryType: {{ selectInfo.geometryType }}</p>
        </div>
      </div>
    </div>

    <div class="charts-right">
      <div class="right-chart1 chart-border">
        <h4 class="chart-header">模型选择</h4>
        <div class="type-container">
          <div class="luminous-corner-box">
            <div class="module-img" @click="changeModule('car')">
              <img src="@/assets/images/three/car.png" alt="" />
            </div>
          </div>
          <div class="luminous-corner-box">
            <div class="module-img" @click="changeModule('aircraft')">
              <img src="@/assets/images/three/aircraft.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="right-chart2 chart-border">
        <h4 class="chart-header">模型数据统计</h4>
        <div ref="rChart1" class="r-chart1"></div>
        <div class="divide-line"></div>
        <div ref="rChart2" class="r-chart2"></div>
      </div>
    </div>
    <moduleOperation ref="moduleOpera" @change-selectposition="changeSelect"></moduleOperation>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import moduleOperation from "./module-operation/index.vue";

const state = reactive({
  chart2DataList: [
    {
      name: "children",
      value: 0
    },
    {
      name: "material",
      value: 0
    },
    {
      name: "geometry",
      value: 0
    },
    {
      name: "matrix",
      value: 0
    }
  ],
  chart2MaxData: 5300,
  selectInfo: {
    name: "",
    materialLength: 0,
    geometryType: ""
  }
});
const { selectInfo } = toRefs(state);
const rChart1 = ref(null);
const rChart2 = ref(null);
onMounted(() => {
  initChart1();
  initChart2();
});

const initChart1 = () => {
  let category = state.chart2DataList.map((item) => item.name);
  let barData = state.chart2DataList.map((item) => item.value);
  let myChart = echarts.init(rChart1.value);
  myChart.clear();
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        label: {
          show: true
        }
      }
    },
    xAxis: {
      type: "category",
      data: category
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: barData,
        type: "bar",
        itemStyle: {
          color: "#65faf9"
        }
      }
    ]
  };
  myChart.setOption(option);
};

const initChart2 = () => {
  let myChart = echarts.init(rChart2.value);
  myChart.clear();
  let option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    color: ["#0263ff", "#ff7723", "#792ae0", "#e0c854", "#20d133", "#66fbfa", "#f1d658", "#008a10"],
    series: [
      {
        name: "数据统计",
        type: "pie",
        radius: ["35%", "75%"],
        center: ["50%", "50%"],
        itemStyle: {
          // borderRadius: 5,
          borderWidth: 2
        },
        label: {
          color: "#fff"
        },
        data: state.chart2DataList
      }
    ]
  };
  myChart.setOption(option);
};

// 切换模型
const moduleOpera = ref(null);
const changeModule = (type) => {
  moduleOpera.value.loadCarOrAircraft(type);
};
const changeSelect = (selectPosition) => {
  state.selectInfo.name = selectPosition.name;
  state.selectInfo.materialLength = Array.isArray(selectPosition.material) ? selectPosition.material.length : 1;
  state.selectInfo.geometryType = selectPosition.geometry.type;

  state.chart2DataList[0].value = selectPosition.children.length;
  state.chart2DataList[1].value = state.selectInfo.materialLength;
  state.chart2DataList[2].value = selectPosition.geometry.groups.length;
  state.chart2DataList[3].value = selectPosition.matrix.elements.length;

  initChart1();
  initChart2();
};
</script>
<style lang="scss" scoped>
.tree-screen {
  // width: 1920px;
  // height: 1080px;
  width: 100%;
  height: 100%;
  position: relative;
  user-select: none;
  overflow: hidden;
  header {
    width: 100%;
    height: 90px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    .header-title {
      width: 100%;
      font-size: 46px;
      color: #ffffff;
      letter-spacing: 1px;
      text-align: center;
      margin: 0;
      padding-top: 10px;
    }
  }
  .info-window {
    width: 450px;
    height: 350px;
    background-color: #02161d;
    position: absolute;
    left: 30px;
    top: 200px;
    z-index: 100;
    opacity: 0.7;
    .introduce-container {
      padding: 0 20px;
      position: relative;
      z-index: 100;
      .words-info {
        width: 100%;
        p {
          color: #fff;
          font-size: 18px;
          line-height: 28px;
          text-indent: 2em;
          text-align: justify;
        }
      }
      .video-info {
        width: 100%;
        .introduce-video {
          width: 100%;
        }
      }
    }
  }
  .charts-right {
    width: 480px;
    position: absolute;
    right: 30px;
    bottom: 30px;
    z-index: 50;
    opacity: 0.7;
    .right-chart1 {
      width: 480px;
      height: 175px;
      background-color: #02161d;
      margin-bottom: 20px;
      .type-container {
        width: 420px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0 auto 25px;
        .module-img {
          width: 200px;
          height: 100px;
          display: flex;
          align-items: center;
          overflow: hidden;
          cursor: pointer;
          z-index: 100;
          position: relative;
          &:hover {
            border: 1px solid #65faf9;
          }
          img {
            width: 100%;
          }
        }
      }
    }
    .right-chart2 {
      width: 480px;
      height: 735px;
      background-color: #02161d;

      .r-chart1 {
        width: 440px;
        height: 280px;
        margin: 0 auto;
        z-index: 100;
      }
      .divide-line {
        width: 480px;
        height: 2px;
        background-image: linear-gradient(to right, rgba(101, 250, 249, 0), rgba(101, 250, 249, 1), rgba(101, 250, 249, 0));
        margin: 10px 0;
      }
      .r-chart2 {
        width: 440px;
        height: 330px;
        margin: 0 auto;
        z-index: 100;
      }
    }
  }
}

.chart-header {
  padding: 10px 0 15px;
  font-size: 18px;
  letter-spacing: 2px;
  color: #65faf9;
  text-align: center;
}
.chart-border {
  position: relative;
  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -2px;
    border-top: 2px solid #67fdfc;
    border-bottom: 2px solid #67fdfc;
    z-index: 1;
  }
  &::after {
    content: "";
    display: block;
    width: calc(100% - 40px);
    height: 100%;
    position: absolute;
    top: -2px;
    left: 20px;
    border-top: 2px solid #16444a;
    border-bottom: 2px solid #16444a;
    z-index: 2;
  }
}
.luminous-corner-box {
  background-color: #061f26;
  border: solid 1px #67fdfc;
  position: relative;
  &::before {
    content: "";
    display: block;
    box-sizing: border-box;
    width: calc(100% - 10px);
    height: calc(100% + 2px);
    border-top: 1px solid #16444a;
    border-bottom: 1px solid #16444a;
    position: absolute;
    top: -1px;
    left: 5px;
  }
  &::after {
    content: "";
    display: block;
    box-sizing: border-box;
    width: calc(100% + 2px);
    height: calc(100% - 10px);
    border-left: 1px solid #16444a;
    border-right: 1px solid #16444a;
    position: absolute;
    top: 5px;
    left: -1px;
  }
}
</style>
